/**
 * Switch 组件 - @5 版本
 *
 *    作用：包裹住 Route 组件，让路由匹配规则变成匹配上一个就放手。
 *
 *    在不使用 Switch 的情况下：
 *        路由匹配是从上往下，一条一条匹配，如果匹配上了会继续往下匹配
 *
 *    使用了 Switch 的情况下：
 *        路由匹配是从上往下，一条一条匹配，如果匹配上一条规则之后就不再继续往下匹配了。
 *    注意事项：
 *      1. 需要处理代码的编写顺序，将 path 短路径的放置在 Switch 的最后。 - @5版本
 *
 *
 */

import { FC, useState } from "react";
import { Route, Link, Switch } from "react-router-dom";

function Home() {
  return (
    <div>
      <h4>Home</h4>
    </div>
  );
}

function User() {
  return (
    <div>
      <h4>User</h4>
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>App</h1>
      <Link to="/">首页</Link>
      <br />
      <Link to="/user">用户</Link>
      <hr />
      <Switch>
        <Route path="/user" component={User} />
        <Route path="/" component={Home} />
      </Switch>
    </div>
  );
}

export default App;
